<template>
    <div class="phone" v-loading="loading">
        <!-- banner -->
        <section>
            <!-- 选择组织 -->
            <div style="padding:20px 20px 0 20px">
                <span>请选择组织&nbsp;</span>
                <el-select v-model="value" placeholder="请选择组织名称" style="width:75%; margin-bottom:15px" @change="changeData">
                    <el-option v-for="item in options" :key="item.id" :label="item.organization_name" :value="item.id"></el-option>
                </el-select>
            </div>
            <!-- banner -->
            <el-carousel :interval="5000" height="250px" v-if="banners.length > 0">
                <el-carousel-item v-for="(item,index) in banners" :key="index">
                    <img class="banner" :src="item.banner_path" @click="open(index)">
                </el-carousel-item>
            </el-carousel>
            <div class="none-banner" @click="open(0)" v-else>
                <i class="iconfont ali-add"></i>
            </div>
        </section>
        <!-- 列表状 -->
        <section :class="activeClass">
            <updata v-show="false" :pUpData="myupData" v-if="aaaaaa"></updata>
            <div class="list-div" v-for="(item, key) in tableList" :key="key" @click="openDialog(item, item.id)">
                <i class="el-icon-circle-close" style="color:rgb(48, 65, 86)" @click.stop="deleModel(item)"></i>
                <div v-if="item.banner_bath">
                    <img :src="item.banner_bath" alt="icon图标">
                </div>
                <i v-else class="iconfont ali-tupian"></i>
                <div class="content">
                    <span>{{item.model_name}}</span>
                </div>
                <i class="iconfont ali-shuangjiantou-copy-copy-copy"></i>
            </div>
        </section>
        <!-- 添加宫格 -->
        <section class="add-btn">
            <el-button @click="addGrid">+ 宫格</el-button>
        </section>
        <!-- dialog -->
        <edit-dialog :dialog.sync="dialog" :tableList.sync="tableList" @initList="initList" :form="form" :PorganizationId="organizationId" ></edit-dialog>        
    </div>
</template>
<script>
import updata from '../dialog/listSet'
import editDialog from './../dialog'
import { pageSet_list, pageSet_listAll, pageSet_save, pageSet_edit, pageSet_delete, pageSet_deleteAll } from '@/api/pageSet'
import { labourbanner_listAll } from '@/api/labourbanner'
import { thirdPartyPage_listAll } from "@/api/thirdPartyPage";
import { organization_listAll } from '@/api/organization'
export default {
    data() {
        return {
            banners: [],
            aaaaaa: false,
            myupData:[],
            isShow: false,
            organizationId: 0,
            options: [],
            value: 0,
            //start "从第几条开始"  limmit: "展示多少条"  current："第几页""
            listQuery: { start: 0, limit: 10, total: 0, current: 1 },
            tableList: [],
            dialog: {isShow: false, title:''},
            form: {},
            loading: false,
            // list: [1, 2, 3, 4, 5, 6, 7, 8],
        }
    },
    props: {
        active: {
            type: Number,
            default: 0
        }
    },
    components: { editDialog, updata },
    computed: {
        activeClass() {
            return this.active === 0 ? 'phone-list' : 'phone-box'
        }
    },
    methods: {
        // 组织获取
        async getOrganizationData(){
            const query = {company_id: localStorage.getItem("companyId") - 0 };
            let {data} = await organization_listAll(query);
            this.options = data.data.rows;
            this.value = data.data.rows[0].id;  //值是49
            this.organizationId = data.data.rows[0].id;  //值是49
            let organization_id = data.data.rows[0].id;
            sessionStorage.setItem('organization_id',data.data.rows[0].id);
            this.bannerinitList(organization_id);
            this.initList(organization_id);
        },
        // Banner 获取
        async bannerinitList(id) {
            this.loading = true;
            const { data } = await labourbanner_listAll({ 
                company_id: localStorage.getItem("companyId") - 0,
                organization_id: this.organizationId || sessionStorage.getItem("organization_id") - 0 || id , 
                });
            if (data.status === 100) {
                this.loading = false;
                this.banners = data.data.rows;
            }
        },
        //第三方数据查询
        async thirdGetData(){
            this.activeName = '1';
            let {data} = await thirdPartyPage_listAll({ 
            company_id: localStorage.getItem("companyId")-0,
            pageSet_id: sessionStorage.getItem("pageSetRow_Id") - 0,
            organization_id: sessionStorage.getItem("organization_id") - 0, 
            });
            if(data.status===100){
            this.aaaaaa = true;
            this.myupData = data.data.rows;
            console.log(this.myupData);
            }
        },

        async deleModel(e){
            try {
                const res = await this.$confirm("确认删除吗？");
                if(res == 'confirm'){
                    this.loading = true;
                    let {data} = await pageSet_delete({id:e.id})
                    if(data.status == 100){
                        this.loading = false;
                        this.$message.success("删除成功！");
                    }
                    this.initList();
                }
            } catch (error) {
                //  this.$message.info('取消删除!');
            }
        },
        async changeData(e){
            this.organizationId = e;
            sessionStorage.setItem('organization_id', e);
            this.bannerinitList();
            this.initList();
        },
       async initList(organization_id){
           this.loading = true;
            const query = {
                company_id: localStorage.getItem("companyId") - 0, 
                organization_id: this.organizationId || organization_id, 
                
                organization_id: sessionStorage.getItem("organization_id") 
           };
           let {data} = await pageSet_listAll(query);
           this.loading = false;
            if (data.status == 100) {
                this.tableList = data.data.rows;
            }
        },
        
        async addGrid() {
            this.tableList.push({});
            //this.dialog.isShow = true;
            this.dialog.title = '添加模块'
            this.form = {};
            sessionStorage.setItem("pageSetRow_Id", '');
            let {pageSetId}= await pageSet_save({company_id: localStorage.getItem("companyId") - 0, organization_id: sessionStorage.getItem('organization_id') - 0, });
            this.initList();
       },
        open(index) {
            this.$emit('open', index);
        },
        openDialog(item_val, pageSetRowId){
            this.thirdGetData();
            sessionStorage.setItem("pageSetRow_Id", pageSetRowId);
            this.form = item_val;
            this.dialog = { isShow: true, title: '编辑内容' };
             this.initList();
        }
    },
    created() {
        this.getOrganizationData();
        // this.bannerinitList();
        this.initList();
    }
}
</script>
<style lang="scss" scoped>
.phone {
    width: 420px;
    height: 580px;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    box-shadow: 0 0 5px #DCDFE6;
    overflow-y: scroll;
    .banner {
        cursor: pointer;
        height: 100%;
    }
    .none-banner {
        width: 100%;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .ali-add {
            font-size: 30px;
            color: #909399;
        }
    }
}

.ali-tupian {
    font-size: 70px;
    color: #909399;
}

.content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
        font-size: 14px;
        color: #606266;
        font-weight: bold;
    }
}

.phone-list {
    margin-top: 1px;
    .list-div {
        display: flex;
        width: 100%;
        // height: 90px;
        padding: 10px 5px;
        cursor: pointer;
        border-bottom: 1px solid #EBEEF5;
        img {
            height: 70px;
            width: 70px;
            border-radius: 50%;
        }
        .ali-shuangjiantou-copy-copy-copy {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #606266;
            font-weight: bold;
            margin-right: 10px;
        }
    }
}

.phone-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1px;
    .list-div {
        display: flex;
        width: 50%;
        height: 90px;
        padding: 5px;
        cursor: pointer;
        border-bottom: 1px solid #EBEEF5;
        border-right: 1px solid #EBEEF5;
        img {
            height: 70px;
            width: 70px;
            border-radius: 50%;
        }
        .ali-shuangjiantou-copy-copy-copy {
            display: none;
        }
    }
    .list-div:nth-child(2n){
        border-right: none;
    }
}
.add-btn {
    margin: 20px 0;
    text-align: center;
}
</style>
